<template>
    <div class="rightOne">
        <ThemeTitle :title="title" />
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">代表视频</div>
            </div>
        </div>
        <div class="videos">
            <div v-for="item in 6" :key="item">
                <img src="/data/images/hngk/haibian.jpg" alt="" />
            </div>
        </div>
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">视频统计</div>
            </div>
        </div>
        <div class="videoDesc">
            <div class="videoNum">
                <div>
                    <span>视频总数</span>
                    <span>258个</span>
                </div>
                <div
                    :class="{ fenbuActive: isVideo }"
                    @click="videoHandleClick"
                >
                    地图分布
                </div>
            </div>
            <div id="videoChartOne"></div>
            <div id="videoChartTwo"></div>
        </div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle";
import { onMounted, ref, provide, nextTick, onBeforeUnmount } from "vue";
import { get } from "../../../util/request";
import echarts from "echarts";
import { ElLoading } from "element-plus";
export default {
    components: {
        ThemeTitle,
    },
    setup() {
        const title = provide("title", "应急管理视频");
        let isVideo = ref(false);
        let loading = null;
        let colorArr = [
            "#FFFF00",
            "#808000",
            "#BDB76B",
            "#FFFACD",
            "#EEE8AA",
            "#F0E68C",
            "#FFD700",
            "#FFF8DC",
            "#DAA520",
            "#FFA500",
        ];
        let barChart = null;
        let pieChart = null;
        function drawChartOne() {
            var dom = document.getElementById("videoChartOne");
            barChart = echarts.init(dom);
            let option = {
                grid: {
                    top: "10%",
                    bottom: "30%", //也可设置left和right设置距离来控制图表的大小
                    right: "5%",
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        label: {
                            show: true,
                        },
                    },
                },
                xAxis: {
                    data: [
                        "海口",
                        "三亚",
                        "儋州",
                        "文昌",
                        "琼海市",
                        "东方市",
                        "万宁市",
                        "定安县",
                        "屯昌县",
                        "澄迈县",
                    ],
                    axisLine: {
                        show: true, //隐藏X轴轴线
                        lineStyle: {
                            color: "#fff",
                        },
                    },
                    axisTick: {
                        show: false, //隐藏X轴刻度
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#fff", //X轴文字颜色
                            fontSize: "10",
                        },
                        rotate: 40,
                    },
                },
                yAxis: [
                    {
                        type: "value",
                        name: "个",

                        max: 100,
                        min: 0,
                        splitNumber: 5,
                        nameTextStyle: {
                            color: "#fff",
                            padding: -15,
                            fontSize: 10,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#FFFFFF",
                            },
                        },
                        axisLabel: {
                            show: true,
                            // textStyle: {
                            color: "#fff",
                            // }
                        },
                    },

                    // {
                    //     type: "value",
                    //     name:'个',
                    //     gridIndex: 0,
                    //     min:20,
                    //     max:70,
                    //     splitNumber:20,
                    //     splitLine: {
                    //         show: false
                    //     },
                    //     axisLine: {
                    //         show: false
                    //     },
                    //     axisTick: {
                    //         show: false
                    //     },
                    //     axisLabel: {
                    //         show: false
                    //     },
                    //     splitArea: {
                    //         show: true,
                    //         areaStyle: {
                    //             color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                    //         }
                    //     }
                    // }
                ],
                series: [
                    // {
                    //     name: "视频数量",
                    //     type: "line",
                    //     yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
                    //     smooth: true, //平滑曲线显示
                    //     showAllSymbol: true, //显示所有图形。
                    //     symbol: "circle", //标记的图形为实心圆
                    //     symbolSize: 0, //标记的大小
                    //     itemStyle: {
                    //         //折线拐点标志的样式
                    //         color: "#058cff",

                    //     },
                    //     lineStyle: {
                    //         color: "#058cff"
                    //     },
                    //     areaStyle:{
                    //         color: "rgba(5,140,255, 0.2)"
                    //     },
                    //     data: [42, 38, 48, 35, 29, 28, 30, 50,60,70]
                    // },
                    {
                        name: "视频数量",
                        type: "bar",
                        barWidth: 15,
                        itemStyle: {
                            color: "rgba(102,159,239,1)",
                            // color: echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            //         offset: 0,
                            //         color: "#00FFE3"
                            //     },
                            //     {
                            //         offset: 1,
                            //         color: "#4693EC"
                            //     }
                            // ])
                            borderRadius: [30, 30, 30, 30],
                        },
                        data: [42, 38, 48, 35, 29, 28, 30, 50, 60, 70],
                    },
                ],
            };
            barChart.setOption(option);
            window.addEventListener("resize", () => {
                barChart.resize();
            });
        }
        function drawchartTwo() {
            var dom = document.getElementById("videoChartTwo");
            pieChart = echarts.init(dom);
            let option = {
                animation: true,
                legend: {
                    width: "30%",
                    show: false,
                    left: "right",
                    textStyle: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    icon: "circle",
                    right: "0",
                    bottom: "0",
                    padding: [10, 30],
                    itemGap: 20,
                },
                series: [
                    {
                        type: "pie",
                        center: ["45%", "50%"],
                        radius: ["60%", "85%"],
                        color: ["#2ECACE", "#2039C3", "#0F9AF8", "#2B63D5"],
                        startAngle: -160,
                        labelLine: {
                            normal: {
                                length: 0,
                                length2: 0,
                                lineStyle: {
                                    color: "#a2c7f3",
                                },
                            },
                        },
                        label: {
                            formatter: "{b|{b}:}\n {per|{d}%} ",
                            backgroundColor: "rgba(255, 147, 38, 0)",
                            borderColor: "transparent",
                            borderRadius: 4,
                            rich: {
                                a: {
                                    color: "#999",
                                    lineHeight: 20,
                                    align: "center",
                                },
                                hr: {
                                    borderColor: "#aaa",
                                    width: "100%",
                                    borderWidth: 1,
                                    height: 0,
                                },
                                b: {
                                    color: "#b3e5ff",
                                    fontSize: 12,
                                    lineHeight: 20,
                                },
                                c: {
                                    fontSize: 14,
                                    color: "#eee",
                                },
                                per: {
                                    color: "#FDF44E",
                                    fontSize: 14,
                                    padding: [5, 8],
                                    borderRadius: 2,
                                },
                            },

                            color: "#fff",
                            fontSize: 12,
                        },
                        emphasis: {
                            show: false,
                            position: [30, 50],
                            label: {
                                show: true,
                                formatter: "{b|{b}:}  {per|{d}%}  ",
                                backgroundColor: "rgba(255, 147, 38, 0)",
                                borderColor: "transparent",
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: "#999",
                                        lineHeight: 22,
                                        align: "center",
                                    },
                                    hr: {
                                        borderColor: "#aaa",
                                        width: "100%",
                                        borderWidth: 1,
                                        height: 0,
                                    },
                                    b: {
                                        color: "#fff",
                                        fontSize: 18,
                                        lineHeight: 33,
                                    },
                                    c: {
                                        fontSize: 14,
                                        color: "#eee",
                                    },
                                    per: {
                                        color: "#FDF44E",
                                        fontSize: 12,
                                        padding: [5, 6],
                                        borderRadius: 2,
                                    },
                                },
                            },
                        },
                        data: [
                            {
                                name: "森林防火",
                                value: 19,
                            },
                            {
                                name: "水务",
                                value: 86,
                            },
                        ],
                    },
                    {
                        type: "pie",
                        center: ["45%", "50%"],
                        radius: ["50%", "52%"],
                        label: {
                            show: false,
                        },
                        data: [
                            {
                                value: 78,
                                name: "实例1",
                                itemStyle: {
                                    color: {
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        type: "linear",
                                        global: false,
                                        // colorStops: [{
                                        //     offset: 0,
                                        //     color: "#9F17FF"
                                        // }, {
                                        //     offset: 0.2,
                                        //     color: "#01A4F7"
                                        // }, {
                                        //     offset: 0.5,
                                        //     color: "#FE2C8A"
                                        // }, {
                                        //     offset: 0.8,
                                        //     color: "#FEE449"
                                        // }, {
                                        //     offset: 1,
                                        //     color: "#00FFA8"
                                        // }],
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 0.2,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 0.5,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 0.8,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 1,
                                                color: "#fff",
                                            },
                                        ],
                                    },
                                },
                            },
                        ],
                    },
                ],
            };
            pieChart.setOption(option);
            window.addEventListener("resize", () => {
                pieChart.resize();
            });
        }
        function clickHandle(id) {
            if (document.getElementById("zaihaiInfo")) {
                css3Renderer.remove("zaihaiInfo");
            }
            let ids = id.item;
            let type = id.dataType;
            let idArr = Object.keys(ids);
            let idArr1 = idArr.filter((item) => {
                return typeof ids[item] !== "object";
            });
            // let modelObj = {};
            // for (let key in models){
            //     if(key.toString().indexOf(type)>-1){
            //         modelObj =  models[key].properties
            //     }
            // }
            // let idArr2 = idArr1.filter((item)=>{
            //     return modelObj.hasOwnProperty(item)
            // })

            // let htmlStr = `${idArr2.map(function (item, index) {
            //     return `<tr>
            //         <td style="border:1px solid #155e75">${modelObj[item].description}</td>
            //         <td style="border:1px solid #155e75" >${ids[item]}</td>
            //     </tr>`;
            // }).join('')}`;
            let htmlStr = `${idArr1
                .map(function (item, index) {
                    return `<tr>
                    <td>${item}</td>
                    <td >${ids[item]}</td>
                </tr>`;
                })
                .join("")}`;

            css3Renderer.append({
                id: "zaihaiInfo",
                position: [ids.lng, ids.lat, 10],
                element: `
                        <div class='ysc-dynamic-layer ys-css3-box' id='zaihaiInfo'>
                            <div class='line'></div>
                            <div class='mainTable'>
                                <div class="tableTitle">${type}</div>
                                <table border="5" style="
                                width: 100%;
                                line-height: 20px;
                                text-align: center;
                                border-color: #155e75;
                                border-collapse: collapse;">
                                    ${htmlStr}
                                </table>
                            </div>
                        </div>
                    `,
                offset: [10, -250],
            });
        }
        // let loadingInstance = null;
        function videoHandleClick() {
            layerManager.removeAll();
            // isVideo.value = !isVideo.value
            // if(isVideo.value){
            // loadingInstance = ElLoading.service({
            //     lock: true,
            //     text: '数据加载中',
            //     spinner: 'el-icon-loading',
            //     background: 'rgba(0, 0, 0, 0.7)'
            // })
            get(`/api/aggregation/findVideo`).then((res) => {
                layerManager.addPoint(
                    res,
                    "#FFFF00",
                    "视频",
                    "leftClick",
                    clickHandle
                );
                nextTick(() => {
                    // loadingInstance.close();
                });
            });
            // }else{

            // }
        }
        onBeforeUnmount(() => {
            if (barChart) {
                echarts.dispose(barChart);
            }
            if (pieChart) {
                echarts.dispose(pieChart);
            }
        });
        onMounted(() => {
            drawChartOne();
            drawchartTwo();
        });
        return {
            title,
            isVideo,
            videoHandleClick,
        };
    },
};
</script>

<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .rightOne {
        .videos {
            width: vw(364);
            height: vh(198);
            border: 1px solid #0c586a;
            margin-top: vh(18);
            padding: vh(6) vw(6);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            div {
                flex-shrink: 0;
                width: vw(113);
                height: vh(89);

                img {
                    width: vw(113);
                    height: vh(89);
                }
            }
        }

        .videoDesc {
            .videoNum {
                display: flex;
                justify-content: space-between;

                div:nth-child(1) {
                    margin-top: vh(5);
                    margin-bottom: vh(13);

                    span:nth-child(1) {
                        font-size: vw(15);
                    }

                    span:nth-child(2) {
                        font-size: vw(20);
                        color: rgba(255, 189, 57, 1);
                    }
                }

                div:nth-child(2) {
                    width: vw(78);
                    height: vh(30);
                    line-height: vh(30);
                    border: 1px solid #1398cf;
                    border-radius: 3px;
                    text-align: center;
                    cursor: pointer;
                }

                .fenbuActive {
                    background: #03587e;
                }
            }

            #videoChartOne {
                width: vw(364);
                height: vh(105);
            }

            #videoChartTwo {
                width: vw(364);
                height: vh(140);
                margin-top: vh(20);
                margin-bottom: vh(20);
            }
        }

        .geoIntro {
            width: vw(365);
            margin-top: vh(18);

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }

            .geoCarousel {
                width: vw(365);
                height: vh(172);
                border: 1px solid #0c4259;
                padding-top: vh(8);
                padding-left: vw(8);

                .carouseContent {
                    display: flex;

                    .carouseImg {
                        flex-shrink: 0;
                        width: vw(163);
                        height: vh(135);
                        margin-right: vw(12);
                        border: 1px solid #ddd;
                    }

                    .carouseWord {
                        flex-shrink: 0;
                        width: vw(168);
                        height: vh(139);
                        padding: vh(12) vw(0);
                        line-height: vh(17);
                    }
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .rightOne {
        .videos {
            width: vw1(880);
            height: vh(298);
            border: 1px solid #0c586a;
            margin-top: vh(18);
            padding: vh(6) vw1(6);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            div {
                flex-shrink: 0;
                width: vw1(220);
                height: vh(145);

                img {
                    width: vw1(220);
                    height: vh(145);
                }
            }
        }

        .videoDesc {
            height: vh(300);

            .videoNum {
                display: flex;
                justify-content: space-between;

                div:nth-child(1) {
                    margin-top: vh(5);
                    margin-bottom: vh(13);

                    span:nth-child(1) {
                        font-size: vw1(15);
                    }

                    span:nth-child(2) {
                        font-size: vw1(20);
                        color: rgba(255, 189, 57, 1);
                    }
                }

                div:nth-child(2) {
                    width: vw1(78);
                    height: vh(30);
                    line-height: vh(30);
                    border: 1px solid #1398cf;
                    border-radius: 3px;
                    text-align: center;
                    cursor: pointer;
                }

                .fenbuActive {
                    background: #03587e;
                }
            }

            #videoChartOne {
                width: vw1(414);
                height: vh(200);
                float: left;
            }

            #videoChartTwo {
                width: vw1(414);
                height: vh(200);
                margin-top: vh(20);
                float: left;
                margin-bottom: vh(20);
            }
        }

        .geoIntro {
            width: vw1(365);
            margin-top: vh(18);

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw1(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }

            .geoCarousel {
                width: vw1(365);
                height: vh(172);
                border: 1px solid #0c4259;
                padding-top: vh(8);
                padding-left: vw1(8);

                .carouseContent {
                    display: flex;

                    .carouseImg {
                        flex-shrink: 0;
                        width: vw1(163);
                        height: vh(135);
                        margin-right: vw1(12);
                        border: 1px solid #ddd;
                    }

                    .carouseWord {
                        flex-shrink: 0;
                        width: vw1(168);
                        height: vh(139);
                        padding: vh(12) vw1(0);
                        line-height: vh(17);
                    }
                }
            }
        }
    }
}
</style>